<script lang="ts" setup>
import MonthRevenuChart from "@/views/charts/month-revenu-chart.vue"
import MonthVolumeChart from "@/views/charts/month-volume-chart.vue"
import ProductRevenuShareChart from "@/views/charts/product-revenu-share-chart.vue"
import MonthlyActiveUserChart from "@/views/charts/monthly-active-user-chart.vue"
import HourSegmentActiveUserChart from "@/views/charts/hour-segment-active-user-chart.vue"
import MonthlyRegisterUserChart from "@/views/charts/monthly-register-user-chart.vue"

import * as ecommercedataanalysisservice from "@/assets/api/ecommercedataanalysisservice_0_0_1";

import { reactive } from "vue"
import { MonthlyRegister } from "@/assets/api/ecommercedataanalysisservice_0_0_1"


// 引入 vue router
import { useRouter } from "vue-router";
// 构建 router 对象
const router = useRouter()
// 让页面进来，就打开控制台，方便调试

// 
// 
const data = reactive<{
    revenu: number, // 年销售额
    volume: number, // 年销量

    monthly_revenu_datas: Array<ecommercedataanalysisservice.MonthlyRevenu>,
    monthly_volume_datas: Array<ecommercedataanalysisservice.MonthlyVolume>,
    product_revenu_share_datas: Array<ecommercedataanalysisservice.ProductRevenuShare>,
    product_volume_share_datas: Array<ecommercedataanalysisservice.ProductVolumeShare>,

    total_num: number,
    monthly_register_datas: Array<MonthlyRegister>,

    online_num:number,
    monthly_active_datas: Array<ecommercedataanalysisservice.MonthlyActive>,
    hour_active_datas: Array<ecommercedataanalysisservice.HourActive>,
}>({
    revenu: 0,
    volume: 0,
    monthly_revenu_datas: [],
    monthly_volume_datas: [],
    product_revenu_share_datas: [],
    product_volume_share_datas: [],
    total_num: 0,
    monthly_register_datas: [],

    online_num: 0,
    monthly_active_datas: [],
    hour_active_datas: [],

});


const getProductData = async () => {
    const res = await ecommercedataanalysisservice.GetProductData({
        year: 2024
    });
    if (res.err_code !== 0) {
        console.log(res.err_msg)
        return;
    }
    if (res.data) {
        //  数据存在
        data.revenu = res.data.revenu;
        data.volume = res.data.volume;
        data.monthly_revenu_datas = res.data.monthly_revenu_datas;
        data.monthly_volume_datas = res.data.monthly_volume_datas;
        data.product_revenu_share_datas = res.data.product_revenu_share_datas;
    }
    // 1s  调用一次
    setTimeout(() => {
        getProductData();
    }, 500);

};


const getUserRegisterData = async () => {
    const res = await ecommercedataanalysisservice.GetUserRegisterData({
        year: 2024
    });
    if (res.err_code !== 0) {
        console.log(res.err_msg)
        return;
    }
    if (res.data) {
        data.total_num = res.data.total_num;
        data.monthly_register_datas = res.data.monthly_register_datas;
    }
    // 1s  调用一次
    setTimeout(() => {
        getUserRegisterData();
    }, 500);

};

const getUserActiveData = async () => {
    const res = await ecommercedataanalysisservice.GetUserActiveData({
        year: 2024
    });
    if (res.err_code !== 0) {
        console.log(res.err_msg)
        return;
    }
    if (res.data) {
        data.online_num = res.data.online_num;
        data.monthly_active_datas = res.data.monthly_active_datas;
        data.hour_active_datas = res.data.hour_active_datas;
    }
    // 1s  调用一次
    setTimeout(() => {
        getUserActiveData();
    }, 500);

};
const init = async () => {
    await ecommercedataanalysisservice.SubscribeData();
    getProductData();
    getUserRegisterData();
    getUserActiveData();
}

init()


// 跳转页面
const jumpToPage = () => {
  // 跳转页面，这里的值，必须和 router/index.ts 中的 path 一致
  router.push("/login")
}

</script>

<template>
    <!-- 给当前也设置一个类名 -->
    <div class="new-page">
        <el-button type="primary" class="bg" @click="jumpToPage">返回</el-button>
        <!-- 创建标题栏 -->
        <div class="header vertical-layout-center">
            2024电商后台业务数据
        </div>

        <div class="left-wrapper">
            <div class="left-container">
                <month-revenu-chart :monthly_revenu_datas="data.monthly_revenu_datas" />
            </div>
            <div class="left-container">
                <month-volume-chart :monthly_volume_datas="data.monthly_volume_datas" />
            </div>
            <div class="left-container">

                <product-revenu-share-chart :product_revenu_share_datas="data.product_revenu_share_datas" />
            </div>
        </div>

        <div class="center-wrapper">

            <div class="center-container">

                <div class="year-revenu vertical-layout-center">
                    <span>
                        销售额(元)
                    </span>
                    <span class="value">
                        {{ data.revenu.toFixed(2) }}
                    </span>
                </div>

                <div class="data-bar horzontal-center-layout ">
                    <div class="data-colume vertical-layout-center">
                        <span>年销售量</span>
                        <span class="value"> {{ data.volume }}</span>
                    </div>
                    <span class="flex-1" />
                    <div class="data-colume vertical-layout-center">

                        <span>总用户量</span>
                        <span class="value">{{ data.total_num }}</span>
                    </div>
                    <span class="flex-1" />
                    <div class="data-colume vertical-layout-center">
                        <span>在线用户</span>
                        <span class="value">{{ data.online_num }}</span>
                    </div>
                </div>
            </div>

            <div class="center-container">

                <monthly-active-user-chart :monthly_active_datas="data.monthly_active_datas"/>
            </div>

        </div>


        <div class="right-wrapper">
            <div class="right-container">
                <monthly-register-user-chart :monthly_register_datas="data.monthly_register_datas" />
            </div>
            <div class="right-container">

                <hour-segment-active-user-chart :hour_active_datas="data.hour_active_datas"/>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import "@/assets/scss/flex-layout.scss";

.new-page {
    // 设置为绝对定位
    position: absolute;
    // 距离 左边距、右边距、上边距、下边距 都为 0，目标是要让当前页面铺满窗口
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    // 设置背景图片
    background-image: url('@/assets/img/ocean-3605547_1280.png');
    // 然后图片铺满窗口
    background-size: cover;
    background-position: center;
    // 背景图片不随页面滚动而滚动
    background-attachment: fixed;

    .header {
        -webkit-app-region: drag;
        height: vh(80);
        color: white;
        font-size: vw(32);
        font-weight: bold;
       //background-image: url('@/assets/img/header-line.png');
        // background-position: center bottom;
        background-position: center bottom;
        background-size: cover;
        background-repeat: no-repeat;
        /* 不重复背景图片 */
    }

    // 分割符号，用于做间距的
    .spliter {
        // 转换函数
        width: vw(10);
    }


    .left-wrapper {
        position: absolute;
        display: flex;
        flex-direction: column;
        // 距离顶部 90, 因为标题栏高度为 80，增加 10 个像素设置为 边距，因此为 90
        // 转换函数
        top: vh(90);
        left: 0;
        // 设置不设置高度，将底部距离设置 为 0 表示，占用剩余空间
        bottom: 0;
        width: vw(400);
    }

    .left-container {
        position: relative;
        // 设置设置为 1 意思为，在当前的空间下，平分宽度
        // 意思为填满当前的高度
        height: vh(280);
        /* 不重复背景图片 */
        // 设置字体大小
        font-size: vw(28);
    }

    .right-container {
        position: relative;
        // 设置设置为 1 意思为，在当前的空间下，平分宽度
        // 意思为填满当前的高度
        height: vh(420);
        /* 不重复背景图片 */
        // 设置字体大小
        font-size: vw(28);

        &:not(:last-child) {
            margin-bottom: vh(10);
        }
    }

    .center-container {
        position: relative;
        // 设置设置为 1 意思为，在当前的空间下，平分宽度
        // 意思为填满当前的高度
        height: vh(414);
        /* 不重复背景图片 */
        // 设置字体大小
        font-size: vw(28);

        &:not(:last-child) {
            margin-bottom: vh(10);
        }
    }

    .conatiner {
        position: relative;
        // 设置设置为 1 意思为，在当前的空间下，平分宽度
        // 意思为填满当前的高度
        height: vh(420);
        /* 不重复背景图片 */
        // 设置字体大小
        font-size: vw(28);

        &:not(:last-child) {
            margin-bottom: vh(10);
        }
    }

    .center-wrapper {
        position: absolute;
        // 距离顶部 90, 因为标题栏高度为 80，增加 10 个像素设置为 边距，因此为 90
        // 转换函数
        top: vh(90);
        left: vw(410);
        width: vw(612);
        bottom: 0;

        .year-revenu {
            font-size: vw(18);
            position: absolute;
            left: 50%;
            margin-left: vh(-125);
            color: white;
            top: vh(10);
            width: vh(250);
            height: vh(250);
            background: url('@/assets/img/circle-bk.png');
            background-position: center center;
            background-size: 100% 100%;
            ;
            background-repeat: no-repeat;

            .value {
                font-size: vw(24);
                margin-top: vh(10);
            }
        }

        .data-bar {
            position: absolute;
            height: vh(140);
            left: 0;
            right: 0;
            bottom: 0;

        }

        .data-colume {
            font-size: vw(16);
            width: vh(140);
            height: vh(140);
            padding-bottom: vh(55);
            color: white;
            background: url('@/assets/img/data-bk.png');
            background-position: center center;
            background-size: 100% 100%;
            ;
            background-repeat: no-repeat;

            .value {

                margin-top: vh(10);
                font-size: vw(24);
                margin-bottom: vh(10);
            }
        }
    }

    .right-wrapper {
        position: absolute;
        // 距离顶部 90, 因为标题栏高度为 80，增加 10 个像素设置为 边距，因此为 90
        // 转换函数
        top: vh(90);
        // 设置不设置高度，将底部距离设置 为 0 表示，占用剩余空间
        bottom: 0;
        right: 0;
        width: vw(400);
    }
    .bg{
        background: rgba(35, 22, 212, 0.332);;
    }
}
</style>